<template>
  <Empty>
    <Form
      :form-data="formData"
      :control-list="controlList"
      type="submit"
      :inline="false"
      width="500px"
      @entry="entry"
    ></Form>
  </Empty>
</template>

<script>
import Empty from "@/views/component/empty/index.vue";
import Form from "@/views/user/form.vue";
import {
  stringEmptyValidator,
  startEndEmptyValidator,
} from "@/utils/validator";
import { showCreateNg, showCreateOk } from "@/utils/message";
import { getRoleByAll } from "@/api/role";
import { createUser } from "@/api/user";
export default {
  name: "CreateUserForm",
  components: {
    Empty,
    Form,
  },
  beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      await vm.getAllRole();
      await vm.setControlList();
    });
  },
  methods: {
    async getAllRole() {
      let result = await getRoleByAll();
      this.allRole = result.data.list;
    },
    async entry(formData) {
      try {
        formData.roleUuidList = JSON.stringify(formData.roleUuidList);
        await createUser(formData);
        showCreateOk();
        this.$router.back();
      } catch (error) {
        showCreateNg();
      }
    },
    setControlList() {
      this.controlList = [
        {
          type: "avatar",
          label: "头像",
          prop: "avatar",
          progress: 0,
          change: (event) => {
            this.formData.avatar = event;
          },
          setProgress: (event) => {
            this.controlList[0].progress = event;
          },
          remove: () => {
            this.formData.avatar = "";
            this.controlList[0].progress = 0;
          },
          rule: [],
        },
        {
          type: "input",
          label: "姓名",
          prop: "name",
          clearable: true,
          change: (event) => {
            this.formData.name = event ?? "";
          },
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: stringEmptyValidator,
            },
          ],
        },
        {
          type: "input",
          label: "账号",
          prop: "username",
          clearable: true,
          change: (event) => {
            this.formData.username = event ?? "";
          },
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: stringEmptyValidator,
            },
          ],
        },
        {
          type: "input",
          label: "密码",
          prop: "password",
          clearable: true,
          change: (event) => {
            this.formData.password = event ?? "";
          },
          rule: [
            {
              trigger: ["blur", "change"],
              validator: startEndEmptyValidator,
            },
          ],
        },
        {
          type: "checkbox-group",
          label: "权限列表",
          prop: "roleUuidList",
          progress: 0,
          change: (event) => {
            this.formData.roleUuidList = event ?? [];
          },
          checkboxList: this.allRole?.map((role) => {
            return {
              label: role.name,
              value: role.uuid,
            };
          }),
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: (rule, value, callback) => {
                if (value.length === 0) {
                  return callback(new Error("必填项未填写"));
                }
                return callback();
              },
            },
          ],
        },
      ];
    },
  },
  data() {
    return {
      allRole: [],
      formData: {
        name: "",
        avatar: "",
        username: "",
        password: "",
        roleUuidList: [],
      },
      controlList: [],
    };
  },
};
</script>
